<template>
    <div class="fullPage" >
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.text}}</span>
            </div>
            <div class="filter">
                <ul class="lstFilters hidden">
                    <li
                        v-for="(item , index) in configs.tabs"
                        :key="index"
                        :class="index == configs.tabIndex?'active':''"
                        @click="onPickFilterItem(index)"
                    >
                        {{item.tabName}}
                    </li>
                </ul>
            </div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div> 
        <div class="pageBody"> 
            <div class="column">
                <div class="h-list">
                    <ul class="h-lst-item">
                        <li
                            v-for="(item , index) in configs.tabs"
                            :key="index"
                            :class="index == configs.tabIndex?'active':''"
                            @click="onPickFilterItem(index)"
                        >
                            {{item.tabName}}
                        </li>
                    </ul>
                </div>
                <div 
                    v-for="(tab, tabInd) in configs.tabs"
                    :key="tabInd"
                    class="sec"
                    v-if="tabInd == configs.tabIndex"
                >
                    <el-table
                        :data="rowDatas"
                        style="width: 100%"
                        border
                        :height="ui.tabHeight"
                    >
                        <el-table-column
                            v-for = "(col, colIndex) in tab.cols"
                            :key="colIndex"       
                            :prop="col.prop"             
                            :label="col.lab"
                        ></el-table-column> 
                        <el-table-column
                            fixed="right"
                            label="Action"
                            width="160">
                            <template slot-scope="scope">
                                <el-button
                                @click.native.prevent="showDlg(scope.row)"
                                type="text" >
                                <i class="fa fa-edit"></i> edit
                                </el-button>
                                <el-button
                                @click.native.prevent="deleteRow(scope.row)"
                                type="text" >
                                <i class="fa fa-close"></i> remove
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

            </div>
        </div>

        <el-dialog
            :title="ui.title.text"
            :visible.sync="editDlg.show"
            :close-on-click-modal="false"
            width="700px"
            >
            
                <div class="formEditPan">
                    <div class="editRow"
                        v-for="(dataItem,ind ) in editDlg.fields"
                        :key="ind"
                    >
                        <div class="lab">{{dataItem.lab}}</div>
                        <div class="edit">
                            <el-input v-model="editDlg.info[dataItem.prop]"></el-input>
                        </div>
                    </div>   
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editDlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                var path = "squ/baseData/dataDict/";
                me.configs.tabs.forEach( t=>{
                    t.sqls={};
                    t.sqls.getItems = path +t.module+"GetItems";
                    t.sqls.new = path +t.module+"New";
                    t.sqls.update = path +t.module+"Update";
                    t.sqls.delete = path +t.module+"delete";
                    t.rowDatas=[];
                    t.cols.forEach(c=>{
                        c.prop = me.sys.first2Lower(c.field.replace("F_" ,""));
                    })
                })
                me.$nextTick().then(_=>{
                    var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight;
                    me.ui.tabHeight = h;
                    me.onPickFilterItem(me.configs.tabIndex)
                });

            }
            catch(er){
                console.log(er)
            }
        },
        data() {
            return {
                configs: {
                    tabs:[
                        {
                            tabName:"Function" ,
                            module:"function",
                            cols:[
                                {"field":"F_Category","lab":"category","width":"","val":""},
                                {"field":"F_Code","lab":"code","width":"","val":""}, 
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""},
                                {"field":"F_Order","lab":"order","width":"","val":""},
                                {"field":"F_Partic","lab":"partic","width":"","val":""}
                            ],
                            defaultValue:{
                                order:0
                            }
                        } ,
                        {
                            tabName:"Position" ,
                            module:"position",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""}, 
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""},
                                {"field":"F_Order","lab":"order","width":"","val":""}
                            ],
                            defaultValue:{
                                order:0
                            }
                        } ,
                        {
                            tabName:"ResultStatus" ,
                            module:"resultStatus",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""},
                                {"field":"F_Comment","lab":"comment","width":"","val":""}, 
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""}
                            ]
                        } ,
                        {
                            tabName:"ScheduleStatus" ,
                            module:"scheduleStatus",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""},
                                {"field":"F_Comment","lab":"comment","width":"","val":""}, 
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""}
                            ]
                        } ,
                        {
                            tabName:"ReportModule" ,
                            module:"reportModule",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""},
                                {"field":"F_ExportName","lab":"exportName","width":"","val":""}, 
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""},
                                {"field":"F_Report","lab":"report","width":"","val":""},
                                {"field":"F_Type","lab":"type","width":"","val":""},
                                {"field":"F_TypeCode","lab":"typeCode","width":"","val":""}
                            ]
                        } ,
                        {
                            tabName:"SportCode" ,
                            module:"sportCode",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""},
                                {"field":"F_CodeEntity","lab":"codeEntity","width":"","val":""},
                                {"field":"F_Discipline","lab":"discipline","width":"","val":""},
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""},
                                {"field":"F_Note","lab":"note","width":"","val":""},
                                {"field":"F_Order","lab":"order","width":"","val":""}
                            ],
                            defaultValue:{
                                order:0
                            }
                        } ,
                        {
                            tabName:"Event" ,
                            module:"event",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""},
                                {"field":"F_Discipline","lab":"discipline","width":"","val":""},
                                {"field":"F_Event","lab":"event","width":"","val":""},
                                {"field":"F_Gender","lab":"gender","width":"","val":""},
                                {"field":"F_LocalLongName","lab":"localLongName","width":"","val":""},
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_LongName","lab":"longName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""},
                                {"field":"F_Order","lab":"order","width":"","val":""},
                                {"field":"F_SES","lab":"sES","width":"","val":""},
                                {"field":"F_TeamEvent","lab":"teamEvent","width":"","val":""},
                                {"field":"F_TVName","lab":"tVName","width":"","val":""}
                            ],
                            defaultValue:{
                                order:0
                            }
                        } ,
                        {
                            tabName:"Organisation" ,
                            module:"organisation",
                            cols:[
                                {"field":"F_Code","lab":"code","width":"","val":""},  
                                {"field":"F_LocalLongName","lab":"localLongName","width":"","val":""},
                                {"field":"F_LocalName","lab":"localName","width":"","val":""},
                                {"field":"F_LongName","lab":"longName","width":"","val":""},
                                {"field":"F_Name","lab":"name","width":"","val":""}, 
                                {"field":"F_Type","lab":"type","width":"","val":""}
                            ],
                            defaultValue:{
                                order:0
                            }
                        } ,
                    ],
                    tabIndex:0 ,
                } ,
                rowDatas:[],
                ui:{
                    title:{
                        text:"Data Dictionary / 数据字典" ,
                        icon:"fa fa-book"
                    },
                    tabHeight:200,
                    tabCols:[]
                    
                },
                editDlg:{
                    show:false,
                    info:{},
                    fields:[]
                }
            };
        },
        methods: { 
            onPickFilterItem( ind) {
                var me = this; 
                try{  
                    me.configs.tabIndex = ind; 
                    me.refresh();
                } catch(er){
                    console.log(er);
                }
            },
            refresh(  ) {
                var me = this; 
                try{  
                    me.editDlg.show = false;
                    var tab = me.configs.tabs[me.configs.tabIndex];
                    var key = tab.sqls.getItems;
                    var ps ={};
                    me.sys.query(key , ps).then(res=>{
                        tab.rowDatas = res;
                        me.rowDatas = res;
                    })
                } catch(er){
                    console.log(er);
                }
            },
            showDlg( row ) {
                var me = this; 
                try{  
                    var dlg = {
                        show:true,
                        info:{},
                        fields:[]
                    };
                    var tab = me.configs.tabs[me.configs.tabIndex];
                    dlg.fields = tab.cols;
                    if (row && row!=null){
                        dlg.info = row;
                    }
                    else{
                        tab.cols.forEach( f=>{
                            dlg.info[f.prop] ="";                            
                        });
                        if( tab.defaultValue && Object.values(tab.defaultValue)>0){
                            Object.keys(tab.defaultValue).forEach(k=>{
                                dlg.info[k] = tab.defaultValue[k];
                            })
                        }
                        dlg.info[tab.module+"Id"] = 0;
                    }
                    me.editDlg = dlg;
                } catch(er){
                    console.log(er);
                }
            },
            save(   ) {
                var me = this; 
                try{   
                    var tab = me.configs.tabs[me.configs.tabIndex];
                    var ps =me.editDlg.info;
                    var idKey = tab.module+"Id";
                    var idVal = ps[idKey] && ps[idKey]!=null && ps[idKey]>0? ps[idKey]:0;
                    var key = idVal>0? tab.sqls.update: tab.sqls.new;
                    me.sys.query(key , ps).then(res=>{
                        console.log(res);
                        if( res && res.rowcount && res.rowcount>0){
                            me.refresh();
                        }
                        else{
                            me.$message.error('save action faild!');
                        }
                    })
                } catch(er){
                    console.log(er);
                }
            },
            deleteRow(row) {
                var me = this;
                try{ 
                    me.$confirm('此操作将永久删除该代码, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var tab = me.configs.tabs[me.configs.tabIndex]; 
                        var ps ={};
                        ps[tab.module+"Id"] = row[tab.module+"Id"]; 
                        me.sys.query( tab.sqls.delete , ps).then(res=>{
                            if (res.rowcount>0) {
                                me.$message({
                                    message: 'delete action success.',
                                    type: 'success'
                                });
                                me.refresh();
                            }
                            else{
                                me.$message.error('delete  action faild!');
                            }
                        });
                    })
                } catch(er){
                    console.log(er);
                }
            },
        },
        
    }
</script>

<style lang="less" scoped>
    @import url('../module.less');

    .column{
        height: 100%;
        padding-left:160px;
        position: relative;
        .h-list{
            position: absolute;
            left: 0;
            top: 0;
            ul.h-lst-item{
                li{
                    padding: 5px 0;
                    color: #888;
                }
                li:hover{
                    cursor: pointer;
                }
                li.active{
                    color: #0077fe;
                    font-weight: bold;
                }
            }
        }
    }

</style>